<template>
  <base-breadcrumb>
    <div class="about-master-container">
      <a-card v-loading="loading">
        <title-name title="基本信息"></title-name>
        <a-form-model :model="form" ref="formRules" :rules="formRules">
          <a-row>
            <a-col span="8">
              <a-form-model-item label="单位" prop="depName">
                <SelectCompanyAndSubCompany
                  :disabled="disabled"
                  v-model="form.depId"
                  :autoSelect="true"
                  @onSelectChange="form.depName = $event.name"
                >
                </SelectCompanyAndSubCompany>
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="工作室名称" prop="studioName">
                <b-input v-model="form.studioName" :disabled="disabled" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="创建时间" prop="createTime">
                <a-date-picker v-model="form.createTime" valueFormat="x" :disabled="disabled" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="工作室地址" prop="studioAddress">
                <b-input v-model="form.studioAddress" :disabled="disabled" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="创新工作室级别" prop="studioLevel">
                <a-select v-model="form.studioLevel" :disabled="disabled">
                  <a-select-option value="国家级">国家级</a-select-option>
                  <a-select-option value="省部级">省部级</a-select-option>
                  <a-select-option value="地市级">地市级</a-select-option>
                  <a-select-option value="局级">局级</a-select-option>
                  <a-select-option value="公司级">公司级</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="创新工作室类型" prop="studioType">
                <a-select v-model="form.studioType" :disabled="disabled">
                  <a-select-option value="劳模">劳模</a-select-option>
                  <a-select-option value="工匠">工匠</a-select-option>
                  <a-select-option value="职工">职工</a-select-option>
                  <a-select-option value="巾帼">巾帼</a-select-option>
                  <a-select-option value="技师">技师</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="场地大小（m²）" prop="siteSize">
                <b-input-number v-model="form.siteSize" :disabled="disabled" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <a-tabs default-active-key="1" type="card" @change="activeKey = $event">
          <a-tab-pane key="1" tab="负责人情况">
            <a-form-model :model="form.studioHeadSituationDto" ref="studioHeadSituationDtoRules"
                          :rules="studioHeadSituationDtoRules"
            >
              <a-row>
                <a-col span="8">
                  <a-form-model-item label="姓名" prop="topId">
                    <ASelectOrgPeople
                      :disabled="disabled"
                      @onSelectChange="onSelectChange"
                      :selectPeopleName="form.studioHeadSituationDto.name"
                      v-model="form.studioHeadSituationDto.topId"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="性别">
                    <b-input :value="resolveSex(form.studioHeadSituationDto.sex)" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="出生年月">
                    <b-input v-model="form.studioHeadSituationDto.birthday" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="政治面貌">
                    <b-input disabled v-model="form.studioHeadSituationDto.politics" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="文化程度">
                    <b-input disabled v-model="form.studioHeadSituationDto.education" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="最高荣誉" prop="topHonor">
                    <b-input :disabled="disabled" v-model="form.studioHeadSituationDto.topHonor" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="联系人" prop="contacts">
                    <ASelectOrgPeople
                      :disabled="disabled"
                      @onSelectChange="form.studioHeadSituationDto.contactsTel = $event.phone;
                                            form.studioHeadSituationDto.contacts = $event.name;"
                      :selectPeopleName="form.studioHeadSituationDto.contacts"
                      v-model="form.studioHeadSituationDto.contactsId"
                    ></ASelectOrgPeople>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="联系电话" prop="contactsTel">
                    <b-input :disabled="disabled" v-model="form.studioHeadSituationDto.contactsTel" />
                  </a-form-model-item>
                </a-col>
                <a-col span="24">
                  <a-form-model-item label="工作职务">
                    <b-textarea v-model="form.studioHeadSituationDto.jobDuty" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key="2" tab="主要成员">
            <mainMembers
              ref="mainMembers"
              @refresh="getBaseInfo"
              :baseId="form.id" :disabled="disabled" :list.sync="form.studioMainMemberDtos"
            ></mainMembers>
          </a-tab-pane>
          <a-tab-pane key="3" tab="主要成果">
            <mainResult :disabled="disabled" :list.sync="form.studioMainResultDtos"></mainResult>
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <div class="tar page-btn-right-top">
        <a-button v-if="!disabled" type="primary" :loading="loading" @click="save" class="mr10p">提交</a-button>
        <a-button @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>

import SelectCompanyAndSubCompany from '@/components/Select/SelectCompanyAndSubCompany'
// import SelectOrgPeople from '@/components/Select/SelectOrgPeople.vue'
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople.vue'
import mainResult from '@/views/union/yiShiSanSai/innovation/components/mainResult.vue'
import mainMembers from '@/views/union/yiShiSanSai/innovation/components/mainMembers'
import yiShiSanSaiApi from '@/api/union/yiShiSanSai'
import { resolveSex } from '@/utils/util'

export default {
  name: 'a' + Date.now(),
  components: {
    SelectCompanyAndSubCompany,
    ASelectOrgPeople,
    mainMembers,
    mainResult
  },
  data() {
    return {
      disabled: this.$route.query.detail == 1,
      customRender: q => {
        let result = q.name
        if (q.postPNames && q.postPNames.length) {
          result = `${result} (${q.postPNames.join('/')}) `
        }
        return result
      },
      loading: false,
      form: {
        depId: '',
        depName: '',
        studioName: '',
        // createTime: Date.now(),
        studioAddress: '',
        studioLevel: '',
        studioType: '',
        siteSize: '',
        studioMainMemberDtos: [],
        studioMainResultDtos: [],
        studioHeadSituationDto: {
          topId: '',
          sex: '',
          birthday: '',
          politics: '',
          education: '',
          topHonor: '',
          contactsId: '',
          contactsTel: '',
          contacts: '',
          jobDuty: ''
        }
      },
      formRules: {
        depName: { required: true, message: '单位不能为空', trigger: 'blur' },
        studioName: { required: true, message: '工作室名称不能为空', trigger: 'change' },
        createTime: { required: true, message: '创建时间不能为空', trigger: 'change' },
        studioAddress: { required: true, message: '工作室地址不能为空', trigger: 'blur' },
        studioLevel: { required: true, message: '创新工作室级别不能为空', trigger: 'blur' },
        studioType: { required: true, message: '创新工作室类型不能为空', trigger: 'change' },
        siteSize: { required: true, message: '场地大小（m²）不能为空', trigger: 'change' }
      },
      studioHeadSituationDtoRules: {
        topId: { required: true, message: '负责人姓名不能为空', trigger: 'blur' },
        contacts: { required: true, message: '联系人不能为空', trigger: 'blur' },
        contactsTel: { required: true, message: '联系电话不能为空', trigger: 'blur' },
        topHonor: { required: true, message: '最高荣誉不能为空', trigger: 'blur' }
      }
    }
  },

  created: async function() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      await this.getBaseInfo()
    }
  },
  methods: {
    /**
     * 性别解析
     */
    resolveSex(val) {
      return resolveSex(val)
    },
    onSelectChange(e, index) {
      this.form.studioHeadSituationDto.sex = e.sex
      this.form.studioHeadSituationDto.name = e.name
      this.form.studioHeadSituationDto.birthday = e.birthday
      if (e.postPNames && e.postPNames.length) {
        this.form.studioHeadSituationDto.jobDuty = e.postPNames.join('/')
      }
    },
    async getBaseInfo() {
      this.loading = true
      let res = await yiShiSanSaiApi.getStudioById({}, { id: this.form.id })
      this.loading = false
      // console.log(res)
      if (res.code === this.SUCCESS_CODE) {
        this.form = res.data
      }
    },
    async save() {
      // return this.$refs.t.open()
      // return this.$console(this.form)
      // return this.$console(this.studioHeadSituationDto)
      this.$refs.formRules.validate(async valid => {
        if (valid) {
          this.loading = true
          let res
          console.log(this.$refs.mainMembers)
          if (this.form.id) {
            res = await yiShiSanSaiApi.updateByPrimaryKeySelective(this.form)
          } else {
            res = await yiShiSanSaiApi.insertSelective(this.form)
          }
          if (res.code === 200) {
            this.$message.success('保存成功')
            this.form.id = res.data.id
            await this.getBaseInfo()
            this.$close()
          }
          this.loading = false
        } else {
          this.$noticeWarning('请填写完整')
        }
      })
    }

  }
}
</script>
